<template>
  <div class="other" v-if="channelItem">
    <!-- 图片 -->
    <van-swipe :autoplay="3000" lazy-render v-if="channelItem.currentCategory.bannerList.length">
      <van-swipe-item v-for="image in channelItem.currentCategory.bannerList" :key="image">
        <img :src="image.picUrl" />
      </van-swipe-item>
    </van-swipe>

    <!-- 列表 -->
    <div v-for="item in channelItem.categoryItemList">
      <div class="Listtitle">
        <p style="font-size: 16px">{{ item.category.frontName }}</p>
        <p class="twoTitle">{{ item.category.frontName }}</p>
      </div>
      <ul class="otherList">
        <li class="otherListItem" v-for="one in item.itemList" :key="one">
          <img :src="one.listPicUrl" alt="" />
          <div class="content">
            <p class="title">{{ one.name }}</p>
            <p class="price">{{ one.retailPrice }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 接收父组件传递的值
defineProps<{
  channelItem: any
}>()
</script>

<script lang="ts">
export default {
  name: 'VOther'
}
</script>

<style lang="scss" scoped>
.van-swipe {
  width: 100%;
  height: 180px;
  .van-swipe-item {
    img {
      width: 100%;
      // height: 100%;
    }
  }
}
.other {
  .bannerImg img {
    width: 100%;
  }
  .otherList {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-around;

    li {
      width: 45%;
      img {
        width: 100%;
        border-radius: 5%;
      }
    }
    .content p {
      margin: 3px;
      font-size: 14px;
    }
    .content .price {
      color: red;
      font-size: 16px;
    }
  }
}
.Listtitle {
  text-align: center;
  .twoTitle {
    margin-top: 5px;
    font-size: 14px;
    color: #d3c9c9;
  }
}
</style>
